<template>
    <basic-container>
        <el-row :gutter="10"
                class="mb8">
            <el-col :span="1.5">
                <el-button type="primary"
                           icon="el-icon-plus"
                           size="mini"
                           @click="handleTopAdd"
                >新增机构
                </el-button>
            </el-col>
        </el-row>
        <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="name" label="名称" :show-overflow-tooltip="true" width="160"></el-table-column>
            <el-table-column prop="parentName" label="上级机构" :show-overflow-tooltip="true" width="160"></el-table-column>
            <el-table-column prop="type" label="类型" width="120" :formatter="typeFormate"></el-table-column>
            <el-table-column prop="person" label="负责人" :show-overflow-tooltip="true" width="160"></el-table-column>
            <el-table-column prop="tel" label="电话" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="email" label="邮箱" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="操作"
                             align="center"
                             class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="small" type="text" icon="el-icon-plus"  @click="handleAdd(scope.row)">
                        新增下级机构
                    </el-button>
                    <el-button size="small" type="text" icon="el-icon-edit"  @click="handleUpdate(scope.row)">编辑
                    </el-button>
                    <el-button size="small" type="text" icon="el-icon-delete"  @click="handleDelete(scope.row)" :disabled="scope.row.children!=null">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加或编辑机构对话框 -->
        <el-dialog :title="statusDialog"
                   :visible.sync="open"
                   width="60%"
                   append-to-body
                   :close-on-click-modal="false">
            <el-form ref="form"
                     :model="form"
                     :rules="rules"
                     label-width="80px">
                <el-form-item label="上级机构"
                              prop="parentName">
                    <el-input v-model="form.parentName"
                              placeholder="请输入名称" disabled/>
                </el-form-item>
                <el-form-item label="机构名称"
                              prop="name">
                    <el-input v-model="form.name" placeholder="请输入名称"/>
                </el-form-item>
                <el-form-item label="类型"
                              prop="type" v-if="editStatus!='addTop'">
                    <el-radio-group v-model="form.type">
                        <el-radio v-for="dict in typeOptions"
                                  :key="dict.dictValue"
                                  :label="dict.dictValue">{{dict.dictLabel}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="负责人"
                              prop="person">
                    <el-input v-model="form.person"
                              placeholder="请输入负责人"/>
                </el-form-item>
                <el-form-item label="联系电话"
                              prop="tel">
                    <el-input v-model="form.tel"
                              placeholder="请输入联系电话"/>
                </el-form-item>
                <el-form-item label="邮箱"
                              prop="email">
                    <el-input v-model="form.email"
                              placeholder="请输入邮箱"/>
                </el-form-item>
            </el-form>
            <div slot="footer"
                 class="dialog-footer">
                <el-button type="primary"
                           @click="submitForm">确 定
                </el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </basic-container>
</template>

<script>
    import {addDept, delDept, listDept, updateDept} from "@/api/system/dept";

    export default {
        data() {
            return {
                tableData: [],
                open: false,
                statusDialog: '',
                editStatus: 'addTop',
                typeOptions: [],
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    name: [
                        {required: true, message: "名称不能为空", trigger: "blur"}
                    ],
                    type: [
                        {required: true, message: "类型不能为空", trigger: "blur"}
                    ],
                    person: [
                        {required: true, message: "负责人不能为空", trigger: "blur"}
                    ],
                    tel: [
                        {required: true, message: "电话不能为空", trigger: "blur"},
                        {
                            validator: (rule, value, callback) => {
                                if (value) {
                                    if (!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value)) {
                                        callback(new Error("请输入正确的电话号码！"));
                                    } else {
                                        callback();
                                    }
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ]
                }
            }
        },
        created() {
            this.getList();
            this.getDicts("sys_dept_type").then(response=>{
                this.typeOptions =response.data.data;
            });


        },
        methods: {
            getList() {
                this.loading = true;
                listDept().then(response => {
                    const data = response.data.data;
                    this.tableData = this.handleTree(data, "id");
                    this.loading = false;
                });
            },
            /** 新增按钮操作 */
            handleTopAdd() {
                this.reset();
                this.open = true;
                this.statusDialog = '新增机构';
                this.editStatus = 'addTop'
                this.form.parentName = '/';
            },
            /** 新增按钮操作 */
            handleAdd(row) {
                this.reset();
                const data = JSON.parse(JSON.stringify(row));
                this.form.parentName = data.name;
                this.form.parentId = data.id;
                this.form.pids = data.pids + '/' + data.id;
                this.open = true;
                this.statusDialog = '新增【' + row.name + '】下级机构';
                this.editStatus = 'add'
            },
            /** 编辑按钮操作 */
            handleUpdate(row) {
                // this.form = JSON.parse(JSON.stringify(row));
                this.form = this.deepClone(row);
                this.open = true;
                this.statusDialog = '编辑【' + row.name + '】';
                this.editStatus = 'edit'
            },
            /** 提交按钮 */
            submitForm: function () {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != undefined) {
                            updateDept(this.form).then(response => {
                                const data = response.data;
                                if (response.status===200&&data.code === "00") {
                                    this.msgSuccess("编辑成功");
                                    this.open = false;
                                    this.getList();
                                } else {
                                    this.msgError(data.msg);
                                }
                            });
                        } else {
                            addDept(this.form).then(response => {
                                const data = response.data;
                                if (response.status===200&&data.code === "00") {
                                    this.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                } else {
                                    this.msgError(data.msg);
                                }
                            });
                        }
                    }
                });
            },

            /** 删除按钮操作 */
            handleDelete(row) {
                const userIds = row.id;
                this.$confirm('是否确认删除为"' + row.name + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delDept(userIds);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                }).catch(function () {
                });
            },
            typeFormate(row) {
                return this.selectDictLabel(this.typeOptions, row.type);
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    name: undefined,
                    parentId: "0",
                    pids: "0",
                    parentName: "/",
                    type: "0",
                    tel: undefined,
                    email: undefined,
                    delFlag: undefined,
                    createTime: undefined,
                    createBy: undefined,
                    updateTime: undefined,
                    updateBy: undefined
                };
                this.resetForm("form");
            },
        }
    };
</script>

<style>
</style>
